<template>
  <!-- 规格弹窗 -->
  <su-popup :show="authType !== ''" round="10" :show-close="true" @close="closeAuthModal">
    <view class="login-wrap">
      <!-- 1. 账号密码登录 accountLogin -->
      <account-login v-if="authType === 'accountLogin'" :agree-status="state.protocol" @onConfirm="onConfirm" />

      <!-- 2. 短信登录  smsLogin -->
      <sms-login v-if="authType === 'smsLogin'" :agree-status="state.protocol" @onConfirm="onConfirm" />

      <!-- 3. 忘记密码 resetPassword-->
      <reset-password v-if="authType === 'resetPassword'" />

      <!-- 4. 绑定手机号 changeMobile -->
      <change-mobile v-if="authType === 'changeMobile'" />

      <!-- 5. 修改密码 changePassword-->
      <changePassword v-if="authType === 'changePassword'" />

      <!-- 6. 微信小程序授权 -->
      <mp-authorization v-if="authType === 'mpAuthorization'" />

      <!-- 7. 第三方登录 -->
      <view
        v-if="['accountLogin', 'smsLogin'].includes(authType)"
        class="auto-login-box ss-flex ss-flex-col ss-row-center ss-col-center"
      >
        <!-- 7.1 微信小程序的快捷登录 -->
        <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
          <view class="register-title">还没有账号?</view>
          <button class="ss-reset-button login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            快捷登录
          </button>
          <view class="circle" />
        </view>

        <!-- 7.2 微信的公众号、App、小程序的登录，基于 openid + code -->
        <button
          v-if="
            ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
            sheep.$platform.isWechatInstalled
          "
          class="ss-reset-button auto-login-btn"
          @tap="thirdLogin('wechat')"
        >
          <image class="auto-login-img" :src="sheep.$url.static('/static/img/shop/platform/wechat.png')" />
        </button>

        <!-- 7.3 iOS 登录 TODO 芋艿：等后面搞 App 再弄 -->
        <button
          v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
          class="ss-reset-button auto-login-btn"
          @tap="thirdLogin('apple')"
        >
          <image class="auto-login-img" :src="sheep.$url.static('/static/img/shop/platform/apple.png')" />
        </button>
      </view>

      <!-- 用户协议的勾选 -->
      <view
        v-if="['accountLogin', 'smsLogin'].includes(authType)"
        class="agreement-box ss-flex ss-row-center"
        :class="{ shake: currentProtocol }"
      >
        <label class="radio ss-flex ss-col-center" @tap="onChange">
          <radio
            :checked="state.protocol"
            color="var(--ui-BG-Main)"
            style="transform: scale(0.8)"
            @tap.stop="onChange"
          />
          <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
            我已阅读并遵守
            <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
            <view class="agreement-text">与</view>
            <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
          </view>
        </label>
      </view>
      <view class="safe-box" />
    </view>
  </su-popup>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import sheep from '@/sheep'
import accountLogin from './components/account-login.vue'
import smsLogin from './components/sms-login.vue'
import resetPassword from './components/reset-password.vue'
import changeMobile from './components/change-mobile.vue'
import changePassword from './components/change-password.vue'
import mpAuthorization from './components/mp-authorization.vue'
import { closeAuthModal, showAuthModal } from '@/hooks/useModal'

const appInfo = computed(() => sheep.$store('app').info)

const modalStore = sheep.$store('modal')
// 授权弹窗类型
const authType = computed(() => modalStore.auth)

const state = reactive({
  protocol: false,
})

const currentProtocol = ref(false)

// 勾选协议
function onChange() {
  state.protocol = !state.protocol
}

// 查看协议
function onProtocol(title) {
  closeAuthModal()
  sheep.$router.go('/pages/public/richtext', {
    title,
  })
}

// 点击登录 / 注册事件
function onConfirm(e) {
  currentProtocol.value = e
  setTimeout(() => {
    currentProtocol.value = false
  }, 1000)
}

// 第三方授权登陆（微信小程序、Apple）
const thirdLogin = async (provider) => {
  if (!state.protocol) {
    currentProtocol.value = true
    setTimeout(() => {
      currentProtocol.value = false
    }, 1000)
    sheep.$helper.toast('请勾选同意')
    return
  }
  const loginRes = await sheep.$platform.useProvider(provider).login()
  if (loginRes) {
    closeAuthModal()
    // 触发小程序授权信息弹框
    // #ifdef MP-WEIXIN
    showAuthModal('mpAuthorization')
    // #endif
  }
}

// 微信小程序的“手机号快速验证”：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
const getPhoneNumber = async (e) => {
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    sheep.$helper.toast('快捷登录失败')
    return
  }
  let result = await sheep.$platform.useProvider().mobileLogin(e.detail)
  if (result) {
    closeAuthModal()
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';

.shake {
  animation: shake 0.05s linear 4 alternate;
}

@keyframes shake {
  from {
    transform: translateX(-10rpx);
  }
  to {
    transform: translateX(10rpx);
  }
}

.register-box {
  position: relative;
  justify-content: center;
  .register-btn {
    color: #999999;
    font-size: 30rpx;
    font-weight: 500;
  }
  .register-title {
    color: #999999;
    font-size: 30rpx;
    font-weight: 400;
    margin-right: 24rpx;
  }
  .or-title {
    margin: 0 16rpx;
    color: #999999;
    font-size: 30rpx;
    font-weight: 400;
  }
  .login-btn {
    color: var(--ui-BG-Main);
    font-size: 30rpx;
    font-weight: 500;
  }
  .circle {
    position: absolute;
    right: 0rpx;
    top: 18rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background: var(--ui-BG-Main);
  }
}
.safe-box {
  height: calc(constant(safe-area-inset-bottom) / 5 * 3);
  height: calc(env(safe-area-inset-bottom) / 5 * 3);
}

.tcp-text {
  color: var(--ui-BG-Main);
}

.agreement-text {
  color: $dark-9;
}
</style>
